﻿@{
    ViewBag.Title = "MoveButterflyEasel";
    Layout = "~/Views/Shared/_EaselPage.cshtml";
}

<h2>Move Butterfly Easel</h2>


<canvas id="canvas" width="1000" height="800" style="border: #008000 solid 1px"></canvas>

<script>
    var stage;
    function init() {
        stage = new createjs.Stage(document.getElementById('canvas'));
        createjs.Ticker.addEventListener("tick", handleTick);
        createjs.Ticker.setFPS(60);
        start();
    }
    function handleTick(e) {
        stage.update();
    }
    function start() {
        drawButterflies();
    }
    function drawButterflies() {
        var imgPath = '/Images/butterfly.png';
        butterfly1 = new createjs.Bitmap(imgPath);
        butterfly2 = new createjs.Bitmap(imgPath);
        butterfly3 = new createjs.Bitmap(imgPath);
        butterfly2.x = 200;
        butterfly3.x = 300;
        stage.addChild(butterfly1, butterfly2, butterfly3);
        stage.update();
        setTimeout(moveButterfly, 1000);
    }
    function moveButterfly() {
        butterfly2.y += 200;
    }

    window.onload = function () {
        init();
    }
</script>